<template>
  <div class="left-panel">
    <el-collapse accordion v-model="activeNames">
      <el-collapse-item name="基础容器">
        <template slot="title">
          基础容器<i class="header-icon el-icon-info"></i>
        </template>
      </el-collapse-item>
      <el-collapse-item name="高级容器" title="高级容器">
      </el-collapse-item>
      <el-collapse-item name="基础组件" title="基础组件">
        <el-row >
          <el-col :span="12" class="draggable"   v-for="component in formComponents" :key="component.id">
          <!-- <i class="el-icon-edit"></i> {{component.name}} -->
          <div class="component-name" draggable="true" @dragstart="onDragStart(component)">{{component.label}}</div>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item  name="高级组件" title="高级组件">
      </el-collapse-item>
      
    </el-collapse>
    
  </div>
</template>

<script>
export default {
  data(){
    return{
      activeNames:['基础组件'],
      formComponents: [
        { id: 1, name: 'Input',label:'单行文本',placeholder:'',span:12, type: 'el-input', value: '',dataField:'' },
        { id: 2, name: 'Select',label:'选择框',placeholder:'', span:12,type: 'el-select', value: '',dataField:'' },
        { id: 3, name: 'Checkbox',label:'多选框',placeholder:'', span:12,type: 'el-checkbox', value: false ,dataField:''},
        { id: 4, name: 'Radio',label:'单选框',placeholder:'', span:12,type: 'el-radio', value: false,dataField:'' },
        { id: 5, name: 'InputNumber',label:'计数器',placeholder:'', span:12,type: 'el-input-number', value: '',dataField:'' },
        { id: 6, name: 'Cascader',label:'级联选择',placeholder:'',span:12, type: 'el-cascader', value: '' ,dataField:''}
      ],
    }
  },
  methods: {
    onDragStart(component) {
      console.log(component)
      event.dataTransfer.setData('component', JSON.stringify(component));
    }
  }
};
</script>

<style scoped>
/* .left-panel {
  padding: 20px;
} */

.draggable {
  background-color: #fff;
  padding: 10px;
  text-align: center;
  
  border-radius: 4px;
  
}
/deep/ .el-collapse-item__header{
  padding-left: 10px;
}
.component-name{
  width: 70px;
  height: 70px;
  line-height: 70px;
  border:1px silver solid ;
  border-radius: 5px;
  cursor: move;
}
</style>